<template>
  <div class="refund-detail">
    <div class="status-bg">
      <p class="money">
        <span>¥</span>2300
      </p>
      <p>19:34后自动取消</p>
    </div>
    <div class="refund-info">
        <van-radio-group v-model="radio" @change="selectPayType">
      <div class="pay-list">
        <img src="../assets/images/weixinzhifu.png" alt class="wx-icon">
        <div class="pay-list-center">
          <p>微信支付</p>
          <p>亿万用户的选择，更快更安全</p>
        </div>
        <van-radio name="1" class="select">
          <img slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
        </van-radio>
      </div>
        <div class="pay-list">
        <img src="../assets/images/yinhangka.png" alt class="wx-icon">
        <div class="pay-list-center">
          <p>一网通银行卡支付</p>
        </div>
        <van-radio name="2" class="select">
          <img slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
        </van-radio>
      </div>
      </van-radio-group>
    </div>
    <div class="now-pay-btn">立即支付</div>
  </div>
</template>
<script>
import { RadioGroup, Radio } from "vant";

export default {
  components: {
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup
  },
  data() {
    return {
      status: false,
      checked: true,
      icon: {
        normal: require("../assets/images/weixuanzhong.png"),
        active: require("../assets/images/xuanzhong.png")
      },
      radio:'1',
      checked2:'',
      checked1:''
    };
  },
  methods:{
      selectPayType() {
          console.log(this.radio)
      }
  }
};
</script>
<style>
.van-radio__icon {
    height: .38rem;
    width: .38rem;
    line-height: .18rem;
}
</style>

<style lang="scss" scoped>
.status-bg {
  height: 3.04rem;
  background: #ff6422;
  p.money {
    text-align: center;
    font-size: 0.8rem;
    color: #fff;
    font-weight: bold;
    padding-top: 0.7rem;
    span {
      font-size: 0.6rem;
    }
  }
  p:nth-child(2) {
    font-size: 0.28rem;
    text-align: center;
    color: #fff;
  }
}
.refund-info {
  width: 90%;
  min-height: 2.1rem;
  border-radius: 0.2rem;
  background: #fff;
  position: absolute;
  top: 2.44rem;
  left: 5%;
  padding: 0.4rem 0;

  .pay-list {
    border-bottom: 1px solid #efe5e5;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    padding-bottom: 0.4rem;
    &:nth-child(2) {
        padding-top: .40rem;
        border-bottom: 0;
        padding-bottom: 0;
    }
    img.wx-icon {
      width: 0.54rem;
      height: 0.54rem;
      margin-right: 0.28rem;
    }
    .pay-list-center {
        flex: 1;
        -webkit-flex:1;
      p {
        &:nth-child(1) {
          font-size: 0.32rem;
          color: #333;
        }

        &:nth-child(2) {
          font-size: 0.24rem;
          color: #999;
          margin-top: 0.17rem;
        }
      }
    }
    .select {
  
        img {
          width: 0.38rem;
          height: 0.38rem;
        }
     
    }
  }
}
.now-pay-btn {
  width: 80%;
  height: .90rem;
  text-align: center;
  line-height: .90rem;
  font-size: .32rem;
  color: #fff;
  background: #f85415;
  border-radius: .40rem;
  position: fixed;
  bottom:.35rem;
  left: 10%;
  &:active {
   opacity:0.7
  }
}
</style>

